<template>
  <view class="t-login">
    <view class="t-b">{{ title }}</view>
    <form class="cl">
      <view class="t-a">
        <image class="image-tag" src="@/static/img/email.png"></image>
        <input type="text" v-model="loginForm.email" placeholder="请输入邮箱号" />
      </view>
      <view class="t-a">
        <image class="image-tag" src="@/static/img/password.png"></image>
        <input v-model="loginForm.password" type="password" placeholder="请输入密码" />
      </view>
      <button form-type="submit" @tap="login">立即登录</button>
    </form>
    <view class="register-password">
      <view class="register" @click="registerNav">注册</view>
      <view class="forget-password" @click="forgetPwd">忘记密码？</view>
    </view>
    <view class="t-d">
      <u-divider>其他登录方式</u-divider>
    </view>
    <view class="loginType">
      <!-- #ifdef MP -->
      <view class="wechat item">
        <view class="icon">
          <u-icon size="50" name="weixin-fill" color="rgb(83,194,64)"></u-icon>
        </view>
        微信
      </view>
      <!-- #endif -->
      <!-- #ifndef MP -->
      <view class="QQ item">
        <view class="icon">
          <u-icon size="50" name="qq-fill" color="rgb(17,183,233)"></u-icon>
        </view>
        QQ
      </view>
      <!-- #endif -->
    </view>
    <view class="t-f">
      <u-checkbox @change="checkboxChange" v-model="check" size="20rpx" label-size="20rpx">同意<text>《用户协议》</text>和<text>《隐私政策》</text></u-checkbox>
    </view>
  </view>
</template>
<script>
import {
  setToken,
  setUserInfo
} from '@/common/auth.js'
import {networkStatus} from "../../utils/chat_utils";
export default {
  data() {
    return {
      title: '欢迎登录账号',
      loginForm: {
        email: '1835698775@qq.com',
        password: '123456',
        flag: false
      },
      check: true,
    }
  },
  onLoad(){
    networkStatus();
    // #ifndef MP
    this.loginForm.email = "2579879363@qq.com"
    // #endif
  },
  methods: {
    checkboxChange(obj) {
      this.check = obj.value;
    },
    login() {
      let that = this;
      if (!this.check) {
        this.$u.toast("请勾选协议！");
        return;
      }
      this.$u.api.login(this.loginForm).then(res => {
        let user = res.data;
        setToken(user.token);
        user.token = '';
        setUserInfo(user)
        uni.$emit("setVuexUserInfo",{user:user,isLoginPage: true});
        uni.reLaunch({
          url:'../index/index',
          fail: (err) => {
            this.$u.toast('跳转出错');
          }
        })
      })
    },
    async getInfo() {
      let info = await this.$u.api.getInfo();
      return info;
    },
    registerNav() {
      this.$u.route('pages/register/register');
    },
    forgetPwd(){
      this.$u.route('pages/forget_pwd/forget_pwd');
    }
  }
}
</script>
<style lang="scss">
.t-login {
  width: 600rpx;
  margin: 0 auto;
  font-size: 28rpx;
  color: #000;

  button {
    font-size: 28rpx;
    background: #000;
    color: #fff;
    height: 90rpx;
    line-height: 90rpx;
    border-radius: 50rpx
  }

  input {
    padding: 0 20rpx 0 120rpx;
    height: 90rpx;
    line-height: 90rpx;
    margin-bottom: 50rpx;
    background: #f4f4f4;
    font-size: 28rpx;
    border-radius: 50rpx
  }

  .register-password {
    display: flex;
    justify-content: space-between;
    margin-top: 30rpx;
    color: blue;
  }

  .t-a {
    position: relative;

    .image-tag {
      width: 40rpx;
      height: 40rpx;
      position: absolute;
      left: 40rpx;
      top: 28rpx;
      border-right: 2rpx solid #dedede;
      padding-right: 20rpx
    }
  }

  .t-b {
    text-align: center;
    font-size: 46rpx;
    color: #000;
    padding: 100rpx 0
  }

  .t-c {
    width: 200rpx;
    height: 90rpx;
    position: absolute;
    right: 1rpx;
    top: 1rpx;
  }

  .t-d {
    font-size: 20rpx;
    text-align: center;
    color: #999;
    margin-top: 100rpx;
  }

  .loginType {
    font-size: 20rpx;
    display: flex;
    justify-content: space-evenly;
    width: 250rpx;
    margin: 20rpx auto 100rpx;

    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: $u-content-color;
    }
  }

  .t-f {
    text-align: center;
    color: #999;

    text {
      color: #2B85E4;
    }
  }

  .uni-input-placeholder {
    color: #000
  }
}


.cl:after {
  clear: both;
  display: flex;
  justify-content: space-between;
  visibility: hidden;
  height: 0;
  content: '\20'
}
</style>
